import 'package:flutter/material.dart';

void main() {
  // 1. 运行应用程序。
  runApp(const MaterialApp(home: Main()));
}

class Main extends StatelessWidget {
  const Main({super.key});

  static const List myList = [
    {
      'name': '张三',
      'age': 18,
      'color': Colors.red,
    },
    {
      'name': '李四',
      'age': 19,
      'color': Colors.blue,
    },
    {
      'name': '王五',
      'age': 20,
      'color': Colors.green,
    },
    {
      'name': '赵六',
      'age': 21,
      'color': Colors.yellow,
    },
    {
      'name': '钱七',
      'age': 22,
      'color': Colors.pink,
    },
    {
      'name': '孙八',
      'age': 23,
      'color': Colors.purple,
    },
    {
      'name': '周八',
      'age': 24,
      'color': Colors.orange,
    },
    {
      'name': '吴九',
      'age': 25,
      'color': Colors.brown,
    },
    {
      'name': '郑十',
      'age': 26,
      'color': Colors.grey,
    },
    {
      'name': '王十一',
      'age': 27,
      'color': Colors.teal,
    },
    {
      'name': '李十二',
      'age': 28,
      'color': Colors.cyan,
    },
    {
      'name': '赵十三',
      'age': 29,
      'color': Colors.lime,
    },
    {
      'name': '钱十四',
      'age': 30,
      'color': Colors.amber,
    },
    {
      'name': '孙十五',
      'age': 31,
      'color': Colors.deepOrange,
    },
    {
      'name': '周十六',
      'age': 32,
      'color': Colors.deepPurple,
    },
    {
      'name': '吴十七',
      'age': 33,
      'color': Colors.lightBlue,
    },
    {
      'name': '郑十八',
      'age': 34,
      'color': Colors.lightGreen,
    },
    {
      'name': '王十九',
      'age': 35,
      'color': Colors.indigo,
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('网格布局-GridView'),
        backgroundColor: Colors.red,
        centerTitle: true,
      ),
      body: Container(
        padding: const EdgeInsets.all(10),
        child: GridView(
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 150, // 横向最大宽度为200
            childAspectRatio: 2, // 宽高比为2
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          ),
          children: myList.map((item) {
            return Container(
              color: item['color'],
              child: Text('${item['name']}今年 ${item['age']}岁'),
              alignment: Alignment.center,
            );
          }).toList(),
        ),
      ),
    );
  }
}
